<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>个人博客</title>
    <link rel="stylesheet" href="../static/css/blogIndex.css">
    <script src="../static/js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="../static/js/common.js" type="text/javascript"></script>
	<script type="text/javascript">
//     $('#personalBlogPage').addClass('currentMenu');
	$(function() { 
// 		var id = location.search.substr(4);//获取上一个页面传递过来的参数 ID
// 		$("#div-input").val(id);
		var url = "http://localhost:8080/lWord/getList";
		ajaxAction(url);
	});
    
	function ajaxAction(action){
		$.ajax({
            type : "post",
            url : action,
            data :{},//设置数据源
            dataType : "json",//设置需要返回的数据类型
			success : function(result) {
				alert(result.length);
				var le=result.length;
				for (var i = 0; i < le; i++) {
				$("#div_ui_comment").append("<li><img src='../pic/head.jpg' alt='' class='user_pic'><div class='message_main_content'><p><span class='user_name'>"
		                +result[i].lname+"</span><span class='public_time'>"
		                +formatDate(result[i].ltime)+"</span></p><p>"
		                +result[i].lnote+"</p><div class='message_op'><a href='javascript:void(0)' class='iconfont praise'>&#xe626;"
		                +"</a><a href='javascript:void(0)' class='reply_message'>回复  "+result[i].ladmire+"</a> </div></div></li>");
				}
			} })
		
	}
	
	
	function tijiao(){
		var comment = $("#comment-textarea").val().replace(/\s+/g,"");	//匿名评论内容
		if (comment!="") {
		var id = $("#div-input").val();//博客id
		 $.ajax({
	            type : "post",
	            url : "http://localhost:8080/blog/addCommentNote",
	            data :{"id":id,"comment":comment},//设置数据源
	            dataType : "json",//设置需要返回的数据类型
				success : function(result) {
					$("#div_ui_comment").append("<li><img src='../pic/head.jpg' alt='' class='user_pic'><div class='message_main_content'><p><span class='user_name'>"
			                +result.commen.commentName+"</span><span class='public_time'>"
			                +formatDate(result.commen.commentTime)+"</span></p><p>"
			                +result.commen.commentNote+"</p><div class='message_op'><a href='javascript:void(0)' class='iconfont praise'>&#xe626;"
			                +"</a><a href='javascript:void(0)' class='reply_message'>回复  "+result.commen.commentAdmire+"</a> </div></div></li>");
				} })
				//清空评论区数据
				$("#comment-textarea").val("");
		}else{
			alert("小伙子，不厚道哦！");
		}
	}
	
	function onNotNull(index){
        if(index==1){
            $("#baidu").submit();
        }else if(index==2){
            $("#csdn").submit();
        }
    }
	
    </script>
</head>
<body>
<!-- 头部页面 -->
<jsp:include page="top.jsp" />
<!-- 内容显示区 -->
<div class="main_section">
    <div class="left_section clearfix">
        <div class="left_content" >
            <!--评论区--->
            <div>
                <div>
                    <ul class="message_list" id="div_ui_comment">
                        <!-- 评论区 -->
                    </ul>
                </div>
                <div style="position: relative">
                    <a href="javascript:void(0)" class="publicBlog_loginBtn">登陆</a>
                    <div class="public_message">
                        <textarea name="" id="comment-textarea" cols="30" rows="4" placeholder="说两句吧..."></textarea>
                    </div>
                    <a href="javascript:void(0)" class="subMessageBtn" onclick="tijiao();">留言</a>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="right_section">
        <div class="card_section">
            <h2 class="small_card_title">搜索</h2>
            <div class="small_card_content">
                <div style='overflow:hidden'><!-- 百度搜索 -->
                    <form  id = 'baidu' action="http://www.baidu.com/baidu" target="_blank" class="search_form">
                        <input id ="baiduseach" class='search_text' type="text" name="word"  size="30" placeholder="请输入搜索内容" >
                        <input class='search_btn' type="button" value="百度"  onclick="onNotNull('1');">
                    </form>
                    <form  id = 'csdn' action="http://so.csdn.net/so/search/s.do" target="_blank" class="search_form" >
                        <input id ="csdnseach" class='search_text' type="text" name="q"  size="30" placeholder="请输入搜索内容" >
                        <input class='search_btn search_CSDN' type="button" value="CSDN" onclick="onNotNull('2');" >
                    </form>
                </div>
            </div>
        </div>
        <div class="card_section">
            <h2 class="small_card_title">推荐内容</h2>
            <div class="small_card_content">
                <ul>
                    <li class="recommend_article">
                        <a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
                        <p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
                    </li>
                    <li class="recommend_article">
                        <a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
                        <p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
                    </li>
                    <li class="recommend_article">
                        <a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
                        <p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
                    </li>
                    <li class="recommend_article">
                        <a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
                        <p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
                    </li>
                    <li class="recommend_article">
                        <a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
                        <p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
                    </li>
                    <li class="recommend_article">
                        <a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
                        <p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
                    </li>
                    <li class="recommend_article">
                        <a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
                        <p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

</body>
</html>